<template>
  <div class="app-container  bg-gray">
    <el-card>
      <el-row class="box-1">
        <div class="components-container board">
          <KanbanColumn
            :key="1"
            :list="modelList"
            :tabbar="tabbarList"
            :header-text="wxappStyle['wxappletName']"
            :header-color="wxappStyle['wxappletColor']"
            :plugin-mode="wxappStyle['memberFormat']"
            plugin-type="agent"
            group="bar"
            class="kanban todo"
            @change="modelListChange"
            @pluginChange="pluginChange"
            @tabbarChange="tabbarChange"/>
        </div>

        <el-tabs v-model="activeTabsNames" class="tabs-box">
          <el-tab-pane label="标题管理" name="first">
            <div class="content">
              <div class="title">标题管理</div>
              <el-form ref="form" label-width="120px" size="small">
                <el-form-item label="小程序标题">
                  <el-input v-model="wxappStyle['wxappletName']"/>
                </el-form-item>
                <el-form-item label="标题栏颜色">
                  <el-color-picker v-model="wxappStyle['wxappletColor']" :predefine="predefineColors"/>
                  <el-alert
                    :closable="false"
                    title="为确保显示效果,请不要设置白色。"
                    type="info"/>
                </el-form-item>
                <el-form-item label="功能菜单样式">
                  <el-radio-group v-model="wxappStyle['memberFormat']">
                    <el-radio :label="1">3宫格</el-radio>
                    <el-radio :label="2">4宫格</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary" @click="saveWxappStyle">保存</el-button>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>

          <!--轮播图管理-->
          <el-tab-pane label="轮播图管理" name="second">
            <div class="content">
              <div class="title">轮播图</div>
              <el-form ref="form" label-width="120px" size="small">
                <el-form-item label="是否显示">
                  <el-switch v-model="bannerModelDisplay" @change="status=>bindModelSwitchChange(status, 1)"/>
                  <el-button class="bg-green" type="primary" style="float: right;" @click="bannerModify({}, '新增')">新增
                  </el-button>
                </el-form-item>
              </el-form>
              <el-table v-loading="tableLoading" :data="bannerList" :max-height="600" border highlight-current-row
                        @sort-change="handleSortChange">
                <el-table-column label="缩略图" width="280" header-align="center" align="center">
                  <template slot-scope="scope">
                    <el-image :src="scope.row['url']" :preview-src-list="[scope.row['url']]" style="width: 120px;height: 80px;"/>
                  </template>
                </el-table-column>
                <el-table-column prop="title" label="标题" min-width="180" header-align="center" align="center"/>
                <el-table-column prop="name" label="页面链接" min-width="260" header-align="center" align="center">
                  <template slot-scope="scope">
                    {{ (scope.row['wxName']|| '--') + '(' + (scope.row['wxPath']|| '--') + ')' }}
                  </template>
                </el-table-column>
                <el-table-column prop="status" label="状态" width="120" header-align="center" align="center">
                  <template slot-scope="scope">
                    <div @click="changeBannerStatus(scope.row)">
                      <el-tag v-if="scope.row.status===1" type="success" class="cursor-pointer">已启用</el-tag>
                      <el-tag v-else type="info" class="cursor-pointer">已禁用</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="200" header-align="center" align="center" fixed="right">
                  <template slot-scope="scope">
                    <el-button
                      type="success"
                      class="bg-green"
                      size="small"
                      icon="el-icon-edit"
                      circle
                      @click="bannerModify(scope.row, '编辑')"/>
                    <el-button
                      type="danger"
                      size="small"
                      icon="el-icon-delete"
                      circle
                      @click="bannerDelete(scope.row)"/>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                :current-page.sync="currentPage"
                :page-size="pageSize"
                :page-sizes="pageSizes"
                :total="total"
                class="pagination"
                layout="total, sizes, prev, pager, next, jumper"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"/>
            </div>
          </el-tab-pane>

          <!--公告栏管理-->
          <el-tab-pane label="公告栏管理" name="third">
            <div class="content">
              <div class="title">公告栏</div>
              <el-form ref="form" label-width="120px" size="small">
                <el-form-item label="是否显示">
                  <el-switch v-model="newModelDisplay" @change="status=>bindModelSwitchChange(status, 2)"/>
                </el-form-item>
              </el-form>
            </div>
          </el-tab-pane>

          <!--插件管理-->
          <el-tab-pane label="插件管理" name="fourth">
            <div class="content">
              <div class="title">插件管理
                <!--<el-button type="primary" size="mini" style="float: right;" @click="pluginDialogVisible=true">自定义插件</el-button>-->
              </div>
              <el-collapse v-model="activeCollapseNames">
                <el-collapse-item v-for="item in pluginList" :key="item.id" :name="item.id" :title="item.label">
                  <el-form ref="form" label-width="120px" size="small">
                    <el-form-item label="启用状态">
                      <el-switch v-model="item.display"/>
                    </el-form-item>
                    <el-form-item v-if="item.id===176" label="显示位置">
                      <el-switch v-model="item.personal" active-text="个人中心" inactive-text="首页"/>
                    </el-form-item>
                    <el-form-item label="显示名称">
                      <el-input v-model="item['new_name']" style="width: 360px;"/>
                    </el-form-item>
                    <el-form-item label="插件图标">
                      <div class="remark">*注:为保证显示效果,请上传一张50px*50px的图片</div>
                      <ws-upload-single-img v-model="item['icon']" :path="item['icon']?(ImageUrl+item['icon']):''"/>
                    </el-form-item>
                    <el-form-item label="是否认证">
                      <el-radio-group v-model="item['is_limit']">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <!--<el-form-item label="访问等级">
                      <el-checkbox-group v-model="item['accessLevel']">
                        <el-checkbox v-for="level in levelList" :key="level.id" :label="level.id">{{ level.name }}</el-checkbox>
                      </el-checkbox-group>
                    </el-form-item>-->
                    <el-form-item>
                      <el-button type="primary" @click="updatePluginDetail(item)">保存</el-button>
                    </el-form-item>
                  </el-form>
                </el-collapse-item>
              </el-collapse>
            </div>
          </el-tab-pane>

          <!--导航栏管理-->
          <el-tab-pane v-if="queryMatch(227)" label="导航栏管理" name="fifth">
            <div class="content">
              <div class="title">导航栏图标</div>
              <el-form ref="form" label-width="120px" size="small">
                <el-form-item>
                  <el-button class="bg-green" type="primary" style="float: right;" @click="showModifyTabbarDialog()">新增
                  </el-button>
                </el-form-item>
              </el-form>
              <el-table v-loading="tableLoading" :data="tabbarTableList" :max-height="600" border highlight-current-row
                        @sort-change="handleSortChange">
                <el-table-column label="未选中图标" width="120" header-align="center" align="center">
                  <template slot-scope="scope">
                    <el-image :src="scope.row['iconPath']" :preview-src-list="[scope.row['iconPath']]" style="width: 60px;height: 60px;"/>
                  </template>
                </el-table-column>
                <el-table-column label="选中时图标" width="120" header-align="center" align="center">
                  <template slot-scope="scope">
                    <el-image :src="scope.row['selectedIconPath']" :preview-src-list="[scope.row['selectedIconPath']]" style="width: 60px;height: 60px;"/>
                  </template>
                </el-table-column>
                <el-table-column prop="text" label="文字" width="180" header-align="center" align="center"/>
                <el-table-column prop="name" label="页面链接" min-width="260" header-align="center" align="center">
                  <template slot-scope="scope">
                    {{ (scope.row['pagePathName']|| '--') + '('+scope.row['pagePath'] + ')' }}
                  </template>
                </el-table-column>
                <el-table-column label="状态" width="120" header-align="center" align="center">
                  <template slot-scope="scope">
                    <div @click="changeTabbarItemStatus(scope['row'])">
                      <el-tag v-if="scope.row.display===1" type="success" class="cursor-pointer">已启用</el-tag>
                      <el-tag v-else type="info" class="cursor-pointer">已禁用</el-tag>
                    </div>
                  </template>
                </el-table-column>
                <el-table-column label="操作" width="160" header-align="center" align="center" fixed="right">
                  <template slot-scope="scope">
                    <el-button
                      type="success"
                      class="bg-green"
                      size="small"
                      icon="el-icon-edit"
                      circle
                      @click="showModifyTabbarDialog(scope.row)"/>
                    <el-button
                      type="danger"
                      size="small"
                      icon="el-icon-delete"
                      circle
                      @click="tabbarDelete(scope.row)"/>
                  </template>
                </el-table-column>
              </el-table>
              <el-pagination
                :current-page.sync="tabbarCurrentPage"
                :page-size="tabbarPageSize"
                :page-sizes="tabbarPageSizes"
                :total="tabbarTotal"
                class="pagination"
                layout="total, sizes, prev, pager, next, jumper"
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"/>
            </div>
          </el-tab-pane>

          <!--其他配置-->
          <el-tab-pane label="其他配置" name="sixth">
            <div class="content">
              <el-form ref="otherConfigForm" label-width="120px" size="small">
                <el-collapse>
                  <el-collapse-item title="我的相册">
                    <el-form-item label="是否启用">
                      <el-radio-group v-model="otherConfig['album']['status']">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                      </el-radio-group>
                    </el-form-item>
                    <el-form-item label="背景图" prop="url">
                      <div class="remark">*注:为保证显示效果,请上传一张375px*200px的图片</div>
                      <ws-upload-single-img v-model="otherConfig['album']['bgImage']"
                                            :path="otherConfig['album']['bgImageUrl']"/>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitOtherConfigForm">保存</el-button>
                    </el-form-item>
                  </el-collapse-item>

                  <el-collapse-item title="工单设置">
                    <el-form-item label="背景图" prop="url">
                      <div class="remark">*注:为保证显示效果,请上传一张375px*200px的图片</div>
                      <ws-upload-single-img v-model="otherConfig['workOrder']['bgImage']"
                                            :path="otherConfig['workOrder']['bgImageUrl']"/>
                    </el-form-item>
                    <el-form-item>
                      <el-button type="primary" @click="submitOtherConfigForm">保存</el-button>
                    </el-form-item>
                  </el-collapse-item>
                </el-collapse>
              </el-form>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-row>
    </el-card>

    <!--轮播图弹出窗-->
    <el-dialog :visible.sync="bannerDialogVisible" :modal="false" :title="bannerForm['dialogTitle']+'添加轮播图'"
               style="background-color: rgba(60, 60, 60, 0.8)" width="460px" class="dialog" center>
      <el-form ref="bannerForm" :model="bannerForm" :rules="bannerFormRules" label-width="100px">
        <el-form-item label="图片" prop="url">
          <div class="remark">*注:为保证显示效果,请上传一张375px*200px的图片</div>
          <ws-upload-single-img v-model="bannerForm['url']"
                                :path="bannerForm['url']?ImageUrl+bannerForm['url']:''"/>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="bannerForm['title']"/>
        </el-form-item>
        <el-form-item label="跳转页面" prop="pages">
          <el-select v-model="bannerForm['path']" placeholder="请选择跳转页面">
            <el-option v-for="item in pagePathList" :key="item.id" :value="item.id" :label="item.name"/>
          </el-select>
        </el-form-item>
        <el-form-item label="参数id" prop="title">
          <div class="remark">*注:跳转页面时会携带的参数id值，可不填</div>
          <el-input v-model="bannerForm['param']"/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="bannerDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="submitBannerForm('bannerForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!--添加插件-->
    <el-dialog :visible.sync="pluginDialogVisible" :modal="false" :title="pluginForm['dialogTitle']+'插件'"
               style="background-color: rgba(60, 60, 60, 0.8)" width="460px" class="dialog" center>
      <el-form ref="pluginForm" :model="pluginForm" :rules="pluginFormRules" label-width="100px">
        <el-form-item label="图片" prop="url">
          <div class="remark">*注:为保证显示效果,请上传一张80px*80px的图片</div>
          <ws-upload-single-img v-model="pluginForm['url']"
                                :path="pluginForm['url']?ImageUrl+pluginForm['url']:''"/>
        </el-form-item>
        <el-form-item label="标题" prop="title">
          <el-input v-model="pluginForm['title']"/>
        </el-form-item>
        <el-form-item label="跳转页面" prop="pages">
          <el-select v-model="pluginForm['pluginForm']" placeholder="请选择跳转页面">
            <el-option v-for="item in '1234'" :key="item" :value="item" :label="item"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="pluginDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="submitPluginForm('pluginForm')">确 定</el-button>
      </div>
    </el-dialog>

    <!--添加tabbar-->
    <el-dialog :visible.sync="modifyTabbarDialogVisible" :modal="false" :title="tabbarForm['title']"
               style="background-color: rgba(60, 60, 60, 0.8)" width="460px" class="tabbarDialog" center>
      <el-form ref="tabbarForm" :model="tabbarForm" :rules="tabbarFormRules" label-width="100px">
        <el-form-item label="图标" prop="iconPath">
          <div class="remark">*注:为保证显示效果,请上传80px*80px的图片</div>
          <div class="remark">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;选中时&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;未选中时</div>
          <ws-upload-single-img v-model="tabbarForm['selectedIconPath']"
                                :path="tabbarForm['selectedIconPath']?ImageUrl+tabbarForm['selectedIconPath']:''"
                                width="80" height="80"/>
          <ws-upload-single-img v-model="tabbarForm['iconPath']"
                                :path="tabbarForm['iconPath']?ImageUrl+tabbarForm['iconPath']:''"
                                width="80" height="80"/>
        </el-form-item>
        <el-form-item label="文字" prop="text">
          <el-input v-model="tabbarForm['text']"/>
        </el-form-item>
        <el-form-item label="跳转页面" prop="pages">
          <el-select v-model="tabbarForm['pageId']" placeholder="请选择跳转页面">
            <el-option v-for="item in pagePathList" :key="item.id" :value="item.id" :label="item.name"/>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="modifyTabbarDialogVisible=false">取 消</el-button>
        <el-button type="primary" @click="submitTabbarForm('tabbarForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import KanbanColumn from '@/components/Kanban-Column';
import { handleSortChange, handleSizeChange, handleCurrentChange, parseTime } from '@/utils/table';
import checkImageSize from '@/utils/index';

export default {
  components: {
    KanbanColumn
  },
  data() {
    return {
      ImageUrl: '',
      // 选中的tab
      activeTabsNames: 'first',
      // 标题管理
      wxappStyle: {
        // 小程序标题
        wxappletName: '',
        // 小程序主色
        wxappletColor: '',
        // 功能菜单样式
        memberFormat: 1
      },
      // 预设的颜色
      predefineColors: [
        '#19C5F4',
        '#18bc9c',
        '#ffd700',
        '#90ee90',
        '#00ced1',
        '#1e90ff'
      ],

      // 选中的Collapse
      activeCollapseNames: '',

      // 模块列表
      modelList: [],
      // 插件列表
      pluginList: [],
      // 导航栏列表
      tabbarList: [],
      // 小程序页面路径
      pagePathList: [],

      // 公告栏模块是否显示
      newModelDisplay: false,

      // 轮播图模块是否显示
      bannerModelDisplay: false,
      // 表单相关数据
      bannerDialogVisible: false,
      bannerForm: {
        dialogTitle: '新增',
        title: '',
        url: '',
        path: '',
        param: ''
      },
      bannerFormRules: { // 个人信息弹窗验证规则
        url: [{ required: true, message: '请选择图片', trigger: 'change' }]
        // title: [{ required: true, message: '请填写标题', trigger: 'change' }]
      },

      // 插件弹窗相关数据
      pluginDialogVisible: false,
      pluginForm: {
        dialogTitle: '新增',
        title: '',
        url: ''
      },
      pluginFormRules: { // 个人信息弹窗验证规则
        url: [{ required: true, message: '请选择图片', trigger: 'change' }]
        // title: [{ required: true, message: '请填写标题', trigger: 'change' }]
      },

      // 表格相关数据
      tableLoading: false,
      currentPage: 1,
      pageSize: this.$store.getters.userInfo.pageSize,
      pageSizes: [10, 20, 50, 100, 1000],
      total: 0,
      bannerList: [],

      // 访问等级列表
      levelList: [],

      // tabbar修改弹窗
      modifyTabbarDialogVisible: false,
      tabbarForm: {
        title: '新增导航图标',
        label: '',
        iconPath: '',
        selectedIconPath: '',
        pageId: ''
      },
      tabbarFormRules: {},
      tabbarTableList: [],
      tabbarCurrentPage: 1,
      tabbarPageSize: this.$store.getters.userInfo.pageSize,
      tabbarPageSizes: [10, 20, 50, 100, 1000],
      tabbarTotal: 0,

      // 其他配置
      otherConfig: {
        album: {
          status: 1,
          bgImage: '',
          bgImageUrl: ''
        },
        workOrder: {
          bgImage: '',
          bgImageUrl: ''
        },
        goods: {
          bgImage: '',
          bgImageUrl: ''
        }
      }
    }
  },
  created() {
    this.loadWxappStyle();
    this.loadPluginList();
    this.loadModuleList();
    this.loadBannerList();
    this.loadLevelList();
    this.loadTabbarList();
    this.loadWxPagePathList();
    this.loadOtherConfig();
  },
  methods: {
    handleCurrentChange, handleSizeChange, handleSortChange, parseTime, checkImageSize,

    // 获取小程序页面路径
    loadWxPagePathList() {
      const url = 'navigation/pagePath';
      const data = { type: 1 };
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.pagePathList = res.data;
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    /* ============================================================= */
    // 获取小程序标题设置
    loadWxappStyle() {
      const url = 'plugin/getWxapplet';
      const data = { type: 1 };
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.wxappStyle = res.data;
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 提交小程序标题设置
    saveWxappStyle() {
      const url = 'plugin/updateWxapplet';
      const data = this.wxappStyle;
      // 客户小程序
      data.type = 1;
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.$message.success(res.msg);
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },
    /* ============================================================= */

    /* ============================================================= */
    // 获取页面显示的模块排序数组
    loadModuleList() {
      const url = 'plugin/getModularOrder';
      const data = { type: 1 };
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.modelList = res.data;
        for (let i = 0; i < res.data.length; i++) {
          if (res.data[i]['id'] === 1 && res.data[i]['status'] === 1) {
            this.bannerModelDisplay = true;
          }
          if (res.data[i]['id'] === 2) {
            this.newModelDisplay = true;
          }
          if (res.data[i]['id'] === 11) {
            this.tabbarList = res.data[i]['navigationList']
          }
        }
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 模块移动
    modelListChange() {
      const url = 'plugin/updateModularOrder';
      const temp = [];
      for (let i = 0; i < this.modelList.length; i++) {
        temp.push({
          id: this.modelList[i]['id'],
          position: i + 1
        })
      }
      const data = { modelList: JSON.stringify(temp) };
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.$message.success(res.msg);
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
        this.loadModuleList();
      })
    },

    // 插件移动位置
    pluginChange() {
      const url = 'plugin/updatePlugUnitOrder';
      const temp = [];
      for (let i = 0; i < this.modelList.length; i++) {
        // 插件模块id为3
        if (this.modelList[i]['id'] === 3) {
          for (let j = 0; j < this.modelList[i]['plugUnitList'].length; j++) {
            temp.push({
              id: this.modelList[i]['plugUnitList'][j]['id'],
              sort: j + 1,
              type_id: this.modelList[i]['plugUnitList'][j]['type_id']
            })
          }
        }
      }
      const data = { plugunitList: JSON.stringify(temp) };
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.$message.success(res.msg);
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
        this.loadModuleList();
      })
    },

    // 获取插件列表
    loadPluginList() {
      const url = 'plugin/list';
      const data = { type: 1 };
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.pluginList = res.data;
        for (let i = 0; i < this.pluginList.length; i++) {
          this.pluginList[i]['display'] = (res.data[i]['display'] === 1);
        }
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 插件开关变更
    bindSwitchChange(status, id) {
      for (let i = 0; i < this.modelList.length; i++) {
        // 插件模块id为3
        if (this.modelList[i]['id'] === 3) {
          for (let j = 0; j < this.modelList[i]['plugUnitList'].length; j++) {
            if (this.modelList[i]['plugUnitList'][j]['id'] === id) {
              this.modelList[i]['plugUnitList'][j]['display'] = (status ? 1 : 0);
            }
          }
        }
      }
    },

    // 模块开关变更
    bindModelSwitchChange(status, id) {
      const url = 'plugin/updateModular';
      const data = { id: id, status: status === true ? 1 : 2 };
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.$message.success(res.msg);
        this.loadModuleList();
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 插件信息修改
    updatePluginDetail(item) {
      const url = 'plugin/updatePlugin';
      const data = Object.assign({}, item);
      data['display'] = data['display'] ? 1 : 0;
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.$message.success(res.msg);
        this.loadModuleList();
        this.loadPluginList();
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },
    /* ============================================================= */

    /* ============================================================= */
    // 获取轮播图列表
    loadBannerList() {
      const url = 'banner/list';
      this.tableLoading = true;
      const data = {
        type: 1
      }
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.bannerList = res.data.rows;
        this.total = res.data.total;
        this.tableLoading = false;
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    changeBannerStatus(row) {
      row.status = row.status === 0 ? 1 : 0;
      const url = 'banner/update';
      const data = { id: row.id, status: row.status };
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.$message.success(res.msg);
        this.loadModuleList();
      }).catch(e => {
        row.status = row.status === 0 ? 1 : 0;
        this.$message.error(e.msg);
      })
    },

    submitBannerForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          // const check = await this.checkImageSize(this.ImageUrl + this.bannerForm['url'], 375, 200);
          // if (!check) {
          //   this.$message.error('图片尺寸不符合规范~');
          //   this.loading = false;
          //   return false;
          // }
          const url = this.bannerForm['id'] ? 'banner/update' : 'banner/add';
          const data = Object.assign({}, this.bannerForm);
          data.type = 1;
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.bannerDialogVisible = false;
            this.$message.success(res.msg);
            this.bannerForm = {};
            this.loadBannerList();
            this.loadModuleList();
          }).catch(e => {
            this.$message.error(e.msg + ',请刷新或联系管理员');
          })
        }
      })
    },

    bannerModify(row, title) {
      this.bannerDialogVisible = true;
      row.dialogTitle = title;
      this.bannerForm = row;
    },

    bannerDelete(row) {
      const url = 'banner/delId/' + row.id;
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.$message.success(res.msg);
        this.loadBannerList();
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },
    /* ============================================================= */

    /* ============================================================= */
    /**
     *  获取等级列表
     *  接口:'member/level-list'
     */
    loadLevelList() {
      const url = 'member/level-list';
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.levelList = res.data;
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },
    /* ============================================================= */

    /* ============================================================= */
    // 插件弹窗提交
    submitPluginForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          const url = this.bannerForm['id'] ? 'banner/update' : 'banner/add';
          const data = Object.assign({}, this.bannerForm);
          data.type = 1;
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.bannerDialogVisible = false;
            this.$message.success(res.msg);
            this.bannerForm = {};
            this.loadBannerList();
            this.loadModuleList();
          }).catch(e => {
            this.$message.error(e.msg + ',请刷新或联系管理员');
          })
        }
      })
    },
    /* ============================================================= */

    /* ============================================================= */
    // 获取导航列表
    loadTabbarList() {
      const url = 'navigation/list';
      const data = {
        type: 1
      }
      this.tableLoading = true;
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.tabbarTableList = res.data.rows;
        this.tabbarTotal = res.data.total;
        this.tableLoading = false;
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 显示tabbar编辑弹窗
    showModifyTabbarDialog(row) {
      this.modifyTabbarDialogVisible = true;
      this.tabbarForm = row || {};
      this.tabbarForm['title'] = row ? '编辑导航图标' : '添加导航图标'
    },

    // 提交
    submitTabbarForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          // let check = await this.checkImageSize(this.ImageUrl + this.bannerForm['iconPath'], 80, 80);
          // if (!check) {
          //   this.$message.error('未选中时图标尺寸不符合规范~');
          //   this.loading = false;
          //   return false;
          // }
          // check = await this.checkImageSize(this.ImageUrl + this.bannerForm['selectedIconPath'], 80, 80);
          // if (!check) {
          //   this.$message.error('选中时图标尺寸不符合规范~');
          //   this.loading = false;
          //   return false;
          // }
          const url = (this.tabbarForm['id'] !== undefined && this.tabbarForm['id'] != null && this.tabbarForm['id'] !== '') ? 'navigation/update' : 'navigation/add';
          const data = Object.assign({}, this.tabbarForm);
          data.type = 1;
          this.$store.dispatch('GetConnect', { url, data }).then(res => {
            this.modifyTabbarDialogVisible = false;
            this.$message.success(res.msg);
            this.tabbarForm = {};
            this.loadTabbarList();
            this.loadModuleList();
          }).catch(e => {
            this.$message.error(e.msg + ',请刷新或联系管理员')
          })
        }
      })
    },

    // 修改导航图标状态
    changeTabbarItemStatus(row) {
      row.display = row.display === 0 ? 1 : 0;
      const url = 'navigation/updateStatus';
      const data = { id: row.id, display: row.display, type: 1 };
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.$message.success(res.msg);
        this.loadTabbarList();
        this.loadModuleList();
      }).catch(e => {
        row.display = row.display === 0 ? 1 : 0;
        this.$message.error(e.msg);
      })
    },

    // 删除导航图标
    tabbarDelete(row) {
      const url = 'navigation/del';
      const data = {
        type: 1,
        id: row.id
      }
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.$message.success(res.msg);
        this.loadTabbarList();
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 导航栏图标移动位置
    tabbarChange() {
      const url = 'navigation/move';
      const temp = [];
      for (let i = 0; i < this.tabbarList.length; i++) {
        temp.push({
          id: this.tabbarList[i]['id'],
          sort: i + 1
        })
      }
      const data = { navigation: JSON.stringify(temp), type: 1 };
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.$message.success(res.msg);
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
        this.loadModuleList();
      })
    },
    /* ============================================================= */

    /* ============================================================= */
    // 获取其他配置
    loadOtherConfig() {
      const url = 'wechatConfigs/info';
      this.tableLoading = true;
      this.$store.dispatch('GetConnect', { url }).then(res => {
        this.otherConfig = res.data;
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员');
      })
    },

    // 提交其他配置修改
    submitOtherConfigForm() {
      const url = 'wechatConfigs/update'
      const data = Object.assign({}, this.otherConfig)
      this.$store.dispatch('GetConnect', { url, data }).then(res => {
        this.$message.success(res.msg)
        this.loadOtherConfig()
      }).catch(e => {
        this.$message.error(e.msg + ',请刷新或联系管理员')
      })
    }
  }
}
</script>
<style lang="scss" type="text/scss" scoped>
@import '../../styles/index.scss';
.box-1 {
  @include flex-row(flex-start, flex-start);
  .tabs-box{
    margin-left: 50px;
    flex:1;
    overflow-x: auto;
    .content{
      flex:1;
      padding: 0 30px;
      .title{
        font-weight: 600;
        margin: 20px 0;
      }
    }
  }
}
.remark {
  font-size: 13px;
  color: $textGray;
}
</style>
<style lang="scss">
  .board {
    display: flex;
    justify-content: space-around;
    flex-direction: column;
    align-items: flex-start;
    border: 1px solid #f1f2f3;
  }

  .kanban {
    &.todo {
      .board-column-header {
        background: #4A9FF9;
      }
    }
  }
  .el-collapse-item__header{
    font-size: 15px;
    color: #000;
  }
</style>
